<style rel="stylesheet" type="text/css">
	.uploadWrapper{
		width: 100%;
		padding: 10px;
		border: 1px #dadada solid;
	}
	.uploadWrapper .selectFile,
	.uploadWrapper .fileItem .delBtn{
		padding: 5px 15px 5px 15px;
		border: 1px #c4c4c6 solid;
		border-radius: 5px;
		margin-right: 15px;
		background-color: #fff;
		cursor: pointer;
	}
	.uploadWrapper .fileList{
		display: none;
	}
	.uploadWrapper .fileItem{
		width: 100%;
		display: flex;
		padding: 5px 0;
		text-align: center;
		border-bottom: 1px #dadada solid;
	}
	.uploadWrapper .fileItem span:not(.delBtn){
		flex: 1;
		margin-right: 15px;
	}
	.uploadWrapper .fileItem .delBtn{
		padding: 2px 15px 2px 15px;
		background-color: #fff;
		cursor: pointer;
		font-size: 12px;
	}
	.uploadWrapper .fileItem span.status{
		/*color: #449d44;*/
		font-size: 12px;
	}
	.uploadWrapper .selectFile:hover,
	.uploadWrapper .fileItem .delBtn:hover{
		background-color: #eee;
	}
</style>


@layout("/common/_curd/_container.html"){
<div>
	<form data-url="${basePath}/projects/save/" method="post" class="form-horizontal" role="form">
		<table class="table table-bordered" >
			<tbody>
			<tr>
				<td width="200px">
					项目名称*
				</td>
				<td width="900px" colspan="4">
					<input type="text" name="projects.name"  placeholder="项目名称" class="form-control" />
				</td>
			</tr>
			<tr>
				<td width="200px">
					申报单位
				</td>
				<td width="900px" colspan="4">
					<input readonly="readonly" type="text" value="${deptName}" class="form-control" />
					<input type="hidden" name="projects.dept_id"  value="${deptId}" class="form-control" />
				</td>
			</tr>
			<tr>
				<td width="200px">
					联系人*
				</td>
				<td width="200px">
					<input type="text" name="projects.contact" required="required"  placeholder="联系人" class="form-control" />
				</td>
				<td width="200px">
					联系电话*
				</td>
				<td width="200px" colspan="2">
					<input type="text" name="projects.phone" required="required"  placeholder="联系电话" class="form-control" />
				</td>
			</tr>
			<tr>
				<td width="200px">
					邮箱
				</td>
				<td width="200px">
					<input type="text" name="projects.email"  placeholder="邮箱" class="form-control" />
				</td>
				<td width="200px">填报日期</td>
				<td width="200px" colspan="2">
					<input type="text" id="indate" name="projects.indate" class="form-control"  value="" placeholder="填报日期"  />
				</td>
			</tr>
			<tr>
				<td width="200px">
					建设规模及主要建设内容
				</td>
				<td width="900px" colspan="4">
					<input type="text" name="projects.introduction"  placeholder="建设规模及主要建设内容" class="form-control" />
				</td>
			</tr>
			<tr>
				<td width="200px">
					责任单位
				</td>
				<td width="900px" colspan="4">
					<input type="text" name="projects.responsible"  placeholder="责任单位" class="form-control" />
				</td>
			</tr>
			<tr>
				<td width="200px">
					建设性质
				</td>
				<td width="200px">
					<blade:select type="dict" code="201" name="projects.nature" value="0" />
				</td>
				<td width="200px">建设起止年限</td>
				<td width="150px">
					<input type="text" id="start" name="projects.start" class="form-control"  value="" placeholder="起始日期"  />
				</td>
				<td width="150px">
					<input type="text" id="over" name="projects.over" class="form-control"  value="" placeholder="结束日期"  />
				</td>
			</tr>
			<tr>
				<td width="200px">
					预算（万）
				</td>
				<td width="200px">
					<input type="text" name="projects.budget"  placeholder="预算（万）" class="form-control" />
				</td>
				<td width="200px">预算来源</td>
				<td width="200px" colspan="2">
					<input type="text" name="projects.Source"  placeholder="预算来源" class="form-control" />
				</td>
			</tr>
			<tr>
				<td width="200px" align="center" colspan="5">
					至${year!}年底进展情况
				</td>
			</tr>
			<tr>
				<td width="200px">
					完成投资（万）
				</td>
				<td width="900px" colspan="4">
					<input type="text" name="projects.Completion"  placeholder="完成投资（万）" class="form-control" />
				</td>
			</tr>
			<tr>
				<td width="200px">
					工程形象进度
				</td>
				<td width="900px" colspan="4">
					<input type="text" name="projects.progress"  placeholder="工程形象进度" class="form-control" />
				</td>
			</tr>
			<tr>
				<td width="200px" align="center" colspan="5">
					${yea!}年计划安排
				</td>
			</tr>
			<tr>
				<td width="200px">
					计划投资（万）
				</td>
				<td width="900px" colspan="4">
					<input type="text" name="projects.plan_budget"  placeholder="计划投资（万）" class="form-control" />
				</td>
			</tr>
			<tr>
				<td width="200px">
					至年底工程形象进度
				</td>
				<td width="900px" colspan="4">
					<input type="text" name="projects.plan_progress"  placeholder="至年底工程形象进度" class="form-control" />
				</td>
			</tr>
			<tr>
				<td width="200px">
					附件(可选择多文件）
					<p id="upload_check"></p>
				</td>
				<td width="900px" colspan="4">
					<div class="uploadWrapper">
						<label for="upload" class="selectFile">
							选择文件<input id="upload" style="display: none;" name="uploadfile" type="file" multiple="true" />
							<input type="hidden" name="projects.annex" id="uploadfiles"  class="form-control" />
						</label>
						<span style="font-size: 14px;">提示：每个文件大小不超过10Mb，支持格式为*、*、*</span>
						<ul style="list-style: none;width: 60%;" class="fileList">
							<!--<li class="fileItem">
                                <span>XXXX.doc</span>
                                <span>0.15MB</span>
                                <span class="status">上传成功</span>
                                <span class="delBtn">删除</span>
                            </li>-->
						</ul>
					</div>
					<!--<input id="file_upload" name="uploadfile"  width="100%" type="file" multiple="true" />
					<input type="text" name="projects.annex" id="uploadfiles"  class="form-control" />-->
				</td>
			</tr>
			<tr>
				<td width="200px">
					备注
				</td>
				<td width="900px" colspan="4">
					<input type="text" name="projects.temarks"  placeholder="备注" class="form-control" />
				</td>
			</tr>
			<!--<tr>-->
			<!--<td width="200px">-->
			<!--建设方案-->
			<!--</td>-->
			<!--<td width="900px" colspan="4">-->
			<!--<input type="text" name="projects.plan_file"  placeholder="建设方案" class="form-control" />-->
			<!--</td>-->
			<!--</tr>-->
			</tbody>
		</table>
		<script src="${basePath}/static/laydate/laydate.js"></script>
		<script type="text/javascript">
			laydate({
				elem: '#indate',
				format: 'YYYY-MM-DD', // 分隔符可以任意定义，该例子表示只显示年月日
				//festival: true, //显示节日
				choose: function(datas){ //选择日期完毕的回调
					/*   alert('得到：'+datas); */
				}
			});
		</script>
		<script type="text/javascript">
			laydate({
				elem: '#start',
				format: 'YYYY-MM-DD', // 分隔符可以任意定义，该例子表示只显示年月日
				//festival: true, //显示节日
				choose: function(datas){ //选择日期完毕的回调
					/*   alert('得到：'+datas); */
				}
			});
		</script>
		<script type="text/javascript">
			laydate({
				elem: '#over',
				format: 'YYYY-MM-DD', // 分隔符可以任意定义，该例子表示只显示年月日
				//festival: true, //显示节日
				choose: function(datas){ //选择日期完毕的回调
					/*   alert('得到：'+datas); */
				}
			});
		</script>
		<!-- 表单 -->

		<!-- 按钮 -->
		<!--新增状态-->
		<input type="hidden" id = "status" name="projects.status" value="0"/>
		<!--暂存状态-->
		<input type="hidden" id="storage" name="storage" value="0"/>

		<div class="clearfix form-actions center" style="margin-top:15px;margin-bottom:5px;">
			<div class="col-md-offset-1 col-md-10">
				<button class="btn" id="btn_storage">
					<i class="ace-icon fa fa-check bigger-110"></i>
					暂存
				</button>
				&nbsp; &nbsp; &nbsp;
				<button class="btn btn-info" id="btn_save">
					<i class="ace-icon fa fa-check bigger-110"></i>
					新增
				</button>
			</div>
		</div>
	</form>



	<!--ajax上传文件-->
	<!--要改-->

</div>
<!--<div id="queue"></div>-->
<!--<div id="show"></div>-->
<script src="${basePath}/static/validate/jquery-html5Validate.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var upload = new UploadFile();
		upload.init();
		function UploadFile() {
			this.fileArr = [];
			this.uploadInput = $("#upload");
			this.fileList = $(".fileList");
			// 初始化
			this.init = function () {
				var _this = this
				this.uploadInput.change(function () {
					if(this.value){
						this.files.length && _this.selectFile.call(_this,this.files);// 此处可以对文件个数作限制，默认不限制
						this.value = "";
					}
				});
			}
		}

		/**
		 * 文件选择并缓存文件信息
		 * fileArr  所选文件数组
		 */
		UploadFile.prototype.selectFile = function (fileArr){
			var _this = this;
			[].slice.call(fileArr).forEach(function (val,index) {
				(function (i) {
					var file = fileArr.item(i);
					_this.fileArr.push(file);
					_this.renderFile.call(_this,file,i);
				})(index);
			});
			this.delFile.call(this);

		}

		/**
		 * 文件信息预览
		 * file  文件
		 */
		UploadFile.prototype.renderFile = function (file,index) {
			var htmlStr = "",
					maxSize = 10,// 支持文件最大10MB
					fileSize = file.size,// 文件大小
					filename = file.name,// 文件名字
					fileType = filename.split('.').pop();// 文件大小
			if(fileType){// 此处是文件类型，可以作对应的限制，例如 fileType==="png"
				if(fileSize <= maxSize*1024*1024){// 文件大小限制
					var size = (fileSize/1024/1024).toFixed(2);
					htmlStr = "<li class='fileItem'><span>"+filename+"</span><span>"+size+"MB</span><span class='status'>未上传</span><span class='delBtn'>删除</span></li>";
					this.fileList.append(htmlStr);
					this.uploadEvent.call(this,file,index);
					index===0&&this.fileList.show();
				}
			}
		}

		// 对所选文件进行删除(上传前)
		UploadFile.prototype.delFile = function () {
			var _this = this;
			$(".fileItem > .delBtn").on("click",function () {
				$(this).parents(".fileItem").remove();
				_this.fileArr.splice($(this).parents(".fileItem").index(),1);console.log(_this.fileArr);
			});
		}

		/**
		 * 文件上传
		 *  file   文件
		 *  index  文件在缓存文件数组中的索引
		 */
		UploadFile.prototype.uploadEvent = function (file,index) {
			var _this = this;
			if(file){
				var formdata = new FormData();
				formdata.append("file",file);
				$.ajax({
					url:"${basePath}/myproject/view",
					type:"POST",
					data:formdata,
					processData: false,
					contentType: false,
					success: function (res) {
						if(res['flag'] === true ) {
							if(index === _this.fileArr.length-1){// 所有文件上传完成
								_this.fileArr = [];// 清空文件缓存数组
								$("#uploadfiles").val(res.names);// 缓存文件名字
							}
							$(".fileItem > .status").text("上传成功");
							$(".fileItem > .status").css("color","#449d44");
						}
					}
				});
			}
		}


		var layerIndex = parent.layer.getFrameIndex(window.name); //获取窗口索引



		$("#btn_storage").on("click",function () {
			$("#status").val(98);
			$("form").html5Validate(function () {
				var ajaxURL = $(this).attr("data-url"),
						ajaxData = $(this).serialize();

				$.post(ajaxURL, ajaxData, function (res) {
					if (res["success"]) {
						layer.msg("暂存成功！", {
							shift: -1, time: 2000, end: function () {
								console.log($("#storage").val());
								window.parent.location.reload();
								parent.layer.close(layerIndex);
							}
						});
					}
				});
			});
		});
		$("#btn_save").on("click",function () {
			$("#status").val(0);
			$("form").html5Validate(function () {
				var ajaxURL = $(this).attr("data-url"),
						ajaxData = $(this).serialize();

				$.post(ajaxURL,ajaxData,function (res) {
					if(res["success"]){
						layer.msg("新增成功！", {shift: -1,time:2000,end:function () {
							console.log($("#storage").val());
							window.parent.location.reload();
							parent.layer.close(layerIndex);
						}});
					}
				});
			});
		});
	});
</script>
@}
